<template>
  <div class="device">
    <!-- 搜索 -->
    <div class="form_search">
      <el-form @submit.native.prevent>
        <el-input v-model="inputBox" placeholder="在此输入箱号进行搜索" clearable></el-input>
      </el-form>
      <el-button type="primary" slot="append" @click="condition" class="dev_search">搜索</el-button>
    </div>
    <!-- 表单列表 -->
    <div class="device-manage">
      <el-table :data="listData" stripe :header-cell-style="getRowClass" >
        <el-table-column prop="num" label="序号"></el-table-column>
        <el-table-column prop="imei" label="IMEI号"></el-table-column>
        <el-table-column prop="update_time" label="出库时间"></el-table-column>
        <el-table-column prop="box_number" label="箱号"></el-table-column>
        <el-table-column prop="devname" label="设备类型">
          <template slot-scope="scope">
            <div style="display: inline;" v-if="scope.row.devname =='fireplug'">消防栓</div>
            <div style="display: inline;" v-if="scope.row.devname =='scm'">烟感设备</div>
          </template>
        </el-table-column>
        <el-table-column prop="storehouses_name" label="设备归属库"></el-table-column>
        <el-table-column prop="sw_version" label="版本号"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Config from "@/config.js";
export default {
  name: "searchBox",
  data() {
    return {
      ops: {
        bar: {
          background: "#DDDEE0"
        }
      },
      //列表
      listData: [],
      // 查询
      inputBox: ''
    };
  },
  methods: {
    // 表头添加背景颜色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background:#f6f6f6";
      } else {
        return "";
      }
    },
    //查询
    condition(){
      this.dev_currentPage  = 1;
      this.getListData();
    },
    // 获取列表
    getListData() {
    let url = `${Config.DEVICE_MANAGE_URL}/device_house_user/query?page=0&size=1000&box_number=${this.inputBox}`;
      this.$http.get(url).then(res => {
          console.log(res)
        if (res.array.length) {
          res.array.map((item, i) => {
            item.num = i + 1;
          });
          this.listData = res.array;
        } else {
          this.listData = res.array;
        }
      });
    }
  }
};
</script>

<style lang='scss' >
@import "../../../../../static/scss/common";
.device {
  width: 100%;
  height: 100%;
   // 搜索
  .form_search {
    width: 100%;
    height: 42px;
    margin-bottom: 16px;
    .el-form {
      width: 500px;
      float: left;
      height: 42px;
      line-height: 42px;
      box-shadow: 5px 5px 0px 0px rgba(34, 34, 34, 0.1);
      border: 0;
      .el-input {
        .el-input__inner {
          height: 42px;
          border-radius: 0;
          border: 0;
          line-height: 42px;
        }
        .el-input__inner:hover {
          border-color: 0;
        }
      }
    }
    .dev_search {
      width: 80px;
      height: 42px;
      background: rgba(235, 56, 56, 1);
      box-shadow: 5px 5px 0px 0px rgba(34, 34, 34, 0.1);
      padding: 0;
      border-radius: 0;
      font-size: 14px;
    }
  }
  //列表
  .device-manage {
    width: 100%;
    height: auto;
    background: $white;
    margin-top: 24px;
    .export {
      margin-right: 27px;
      text-align: right;
      padding-top: 12px;
      .el-button{
        width: 66px;
        height: 24px;
        padding: 0px;
        line-height: 0;
        text-align: center;
      }
    }
  }
}
</style>
